<template>
    <div>
        <h1>视频</h1>
        <div class="container">
            <video autoplay muted :src="videoUrl"></video>
            <el-button @click="init" type="primary">刷新</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
let videoUrl = ref(null);

function init() {
    var url = "/yujn/api/zzxjj.php";
    var data = "?type=video";
    var xhrGet = new XMLHttpRequest();
    xhrGet.open('GET', url + data, true);
    xhrGet.send();
    xhrGet.onreadystatechange = function () {
        if (xhrGet.readyState == 4 && xhrGet.status == 200) {
            // 成功
            console.log(xhrGet);
            videoUrl.value = xhrGet.responseURL;
        } else {
            // 失败
        }
    };
}

onMounted(() => {
    init()
})
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    width: 100%;
    height: 100%;

    button {
        position: absolute;
        top: 0;
        right: 0;
    }

    video {
        width: 100%;
        height: 100%;
    }
}
</style>